<template>
	<!-- <div class="div1">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>咨询预约管理</el-breadcrumb-item>
		</el-breadcrumb>
	</div> -->
	<BreadCrumb pathOne="咨询预约管理"></BreadCrumb>
	<div class="container">
		<!-- 搜索区域 -->
		<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
			<el-form-item label="预约用户" size="large">
				<el-input v-model="queryInfo.username" placeholder="请输入用户名"></el-input>
			</el-form-item>
			<el-form-item label="咨询师" size="large">
				<el-input v-model="queryInfo.counselorName" placeholder="请输入咨询师"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="large" @click="query">搜索</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格区域 -->
		<el-table :data="dataList" border style="width: 100%" row-key="id" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" width="85"></el-table-column>
			<el-table-column prop="appointmentDate" label="预约时间"></el-table-column>
			<el-table-column prop="description" label="情况说明"></el-table-column>
			<el-table-column prop="user.username" label="预约用户"></el-table-column>
			<el-table-column prop="consultant.name" label="咨询师"></el-table-column>
			<el-table-column fixed="right" label="操作" width="180">
				<template #default="scope">
					<el-button type="primary" @click="searchArticleDetails(scope.row.id)">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		
		<el-dialog v-model="dialogFormVisible" title="修改咨询" width="800" style="margin-bottom: 60px;"
			>
			<!-- <el-form :model="form"> -->
			<el-form>
				<el-form-item label="预约时间" label-width="auto">
					<el-date-picker
					        v-model="form.consultationTime"
					        type="date"
					        placeholder="选择日期"
					        size="large"
							value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
					      />
				</el-form-item>
				<el-form-item label="咨询师" label-width="auto">
					<el-select v-model="form.counselorId" placeholder="无" size="large" >
						<el-option v-for="(item,index) in AllClassify" :value="item.id" :label="item.counselorName" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取消</el-button>
					<el-button type="primary" @click="add(),dialogFormVisible = false">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
		
		
		<el-dialog v-model="edit"  title="预约详情" >
			<el-form :model="editForm" label-width="auto" label-position='right'>
				<el-form-item label="预约时间">
					<el-input v-model="editForm.time" readonly />
				</el-form-item>
				<el-form-item label="情况说明">
					<el-input v-model="editForm.content" type="textarea" rows="5" resize="none" readonly />
				</el-form-item>
				<el-form-item label="预约用户" >
					<el-input v-model="editForm.username" readonly />
				</el-form-item>
				<el-form-item label="咨询师">
					<el-input v-model="editForm.consultant" readonly/>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="editNo()">关闭</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 分页区域 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	import BreadCrumb from "../components/BreadCrumb.vue"
	// 查询信息对象
	const queryInfo = reactive({
		username: '',
		counselorName: '',
		pageNum: 1,
		pageSize: 10
	})
	// 总数量
	const total = ref(0)
	// 数据列表
	const dataList = ref([])
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;
	// 获取列表数据
	const query = () => {
		axios.get(
			`consultationAppointment/page?pageNum=${queryInfo.pageNum}&pageSize=${queryInfo.pageSize}&user.username=${queryInfo.username}&consultant.name=${queryInfo.counselorName}`
		).then(resp => {
			if (resp.code == 200) {
				dataList.value = resp.data.list;
				total.value = resp.data.total;
			} else {
				ElMessage.error('查询失败')
			}
		})
	}
	const editForm = reactive({
		time:'',
		content:'',
		username:'',
		consultant:''
	})
	const dialogFormVisible = ref(false)
	const edit=ref(false)
	const searchArticleDetails=(id)=>{
		edit.value = true;
			axios.get(
				`consultationAppointment/${id}`,
			).then(resp => {
				editForm.time=resp.data.appointmentDate,
				editForm.content=resp.data.description,
				editForm.username=resp.data.user.username,
				editForm.consultant=resp.data.consultant.name
			}).catch(error => {
            console.error('加载数据失败:', error)
            ElMessage.error('加载详情失败，请重试')
        })
		
	}
	const editNo = () => {
		edit.value = false;
		ElMessage('取消查看')
	}
	// const createOrUpdate = (id) => {
	// 	dialogFormVisible.value = true
	// 	axios.get(
	// 		`consultation/${id}`,
	// 	).then(resp => {
	// 		form.value = resp.data
	// 		console.log('编辑查询：', form.value);
	// 	})

	// }
	// const add = () => {
	// 	console.log('点击新增保存后传入的：', form.value);
		
	// 		axios.put('consultation', form.value).then(resp => {
	// 			if (resp.code == 200) {
	// 				ElMessage({
	// 					message: '修改成功',
	// 					type: 'success',
	// 				})
	// 			} else {
	// 				ElMessage.error('修改失败')
	// 			}
	// 		}).finally(() => {
	// 			query();
	// 		})
	// }
	// const remove = (id) => {
	// 	console.log('当前行的数据', id);
	// 	ElMessageBox.confirm(
	// 		'此操作将永久删除该数据, 是否继续?',
	// 		'提示', {
	// 		confirmButtonText: '确认',
	// 		cancelButtonText: '取消',
	// 		type: 'warning',
	// 	}
	// 	)
	// 		.then(() => {
	// 			axios.delete(`consultationAppointment/${id}`).then((resp) => {
	// 				console.log('删除后：', resp);
	// 				if (resp.code == 200) {
	// 					ElMessage({
	// 						message: '删除成功',
	// 						type: 'success',
	// 					})
	// 				} else {
	// 					ElMessage.error('删除失败')
	// 				}
	// 			}).finally(() => {
	// 				query();
	// 			});
	
	// 		})
	// 		.catch(() => {
	// 			ElMessage({
	// 				type: 'info',
	// 				message: '取消删除',
	// 			})
	// 		})
	
	// }
	// const batchDelete = () => {
	// 	console.log('ids', ids.value);
	// 	if (!ids.value) {
	// 		ElMessage.info('请选择要删除的数据')
	// 		return
	// 	}
	// 	ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
	// 		confirmButtonText: '确定',
	// 		cancelButtonText: '取消',
	// 		type: 'warning'
	// 	}).then(() => {
	// 		axios.delete(`consultationAppointment?ids=${ids.value}`).then(res => {
	// 			ElMessage.success('删除成功')
	// 			query();
	// 		})
	// 	}).catch(() => {
	// 		ElMessage.info('已取消删除')
	// 	}).finally(() => {
	// 		query();
	// 	});
	// }
	const AllClassify = ref([])
	
	const getAllClassify = () => {
		axios.get(
			`counselor/postsone`,
		).then(resp => {
			console.log('全部分类：', resp.data);
			AllClassify.value = resp.data
		})
	}
	// const handleClose = () => {
	// 	form.value.consultationTime = ''
	// 	form.value.counselorId = 0
	// 	form.value.id = 0
	// }
	
	// // 页面挂载完毕，立刻请求数据
	onMounted(() => {
		query()
		getAllClassify()
	})
	const ids = ref('')
	const handleSelectionChange = (selection) => {
		ids.value = selection.map(item => item.id).join(',')
		console.log('批量删除的ids为:', ids.value)
	}
	const handleSizeChange = (size) => {
		queryInfo.pageSize = size
		query()
	}
	const handleCurrentChange = (num) => {
		queryInfo.pageNum = num
		query()
	}
</script>

<style scoped>
	.div1 {
		border-bottom: 1px solid #eeeeee;
		width: 100%;
		height: 30px;
		padding-top: 10px;
	}

	.container {
		/* margin: 10px 10px; */
		color: #696a6e;
	}
</style>